<template>
	<div>
		<!-- 套大盒子的目的，是为了让里面的150%的背景，不撑出滚动条。 -->
		    <div class="jbbg_wrap">
		        <!-- 渐变背景 -->
		        <div class="jbbg"></div>
		
		        <!-- 顶部条 -->
		        <header>
		            <div class="btn1">
		                <!-- 分类按钮 -->
		                <div class="flbtn"></div>
		            </div>
		            <div class="soso">
		                <div class="soso_inner" @click="sosoHandler()">
		                    搜索目的地/攻略/机票
		                </div>
		            </div>
		            <div class="btn2">
		                登录
		            </div>
		        </header>
		
		        <!-- 轮播图 -->
		        <div class="carousel">
		            <swiper class="myswiper" indicator-dots="true" indicator-color="#d6aa0a"
		            	indicator-active-color="#ffff00" circular="true">
		            	<block v-for="(item, index) in pics" :key="index">
		            		<swiper-item>
		            			<image :src="`/static/${item}.jpg`">
		            			</image>
		            		</swiper-item>
		            	</block>
		            </swiper>
		        </div>
		    </div>
		
		    <!-- 图标导航 -->
		    <nav class="icon-nav">
		        <ul>
		            <li @click="qu('飞机')">
		                <image src="/static/i1.png" alt="">
		                <p>
		                    机票
		                </p>
		            </li>
		            <li @click="qu('高铁')">
		                <image src="/static/i2.png" alt="">
		                <p>
		                    高铁票
		                </p>
		            </li>
		            <li>
		                <image src="/static/i3.png" alt="">
		                <p>
		                    酒店
		                </p>
		            </li>
		            <li>
		                <image src="/static/i4.png" alt="">
		                <p>
		                    汽车票
		                </p>
		            </li>
		            <li>
		                <image src="/static/i5.png" alt="">
		                <p class="menpiao">
		                    门票
		                </p>
		            </li>
		        </ul>
		    </nav>
		
		    <!-- 旅行主题 -->
		    <div class="lxzt">
		        <!-- 头部 -->
		        <div class="hd">
		            <h3>旅行主题</h3>
		            <p>最适合你的旅行方式</p>
		        </div>
		        <div class="bd">
		            <div class="row1">
		                <div class="grid1"></div>
		                <div class="grid2"></div>
		            </div>
		            <div class="row2">
		                <div class="grid1"></div>
		                <div class="grid2"></div>
		                <div class="grid3"></div>
		            </div>
		        </div>
		    </div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pics: ['banner2', 'banner3', 'banner4']
			}
		},
		methods: {
			sosoHandler() {
				wx.navigateTo({
					url: '/pages/search/search'
				});
			},
			qu(v) {
				wx.navigateTo({
					url: '/pages/product-list/product-list?keyword=' + v
				});
			}
		},
	}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

/* 渐变背景的大盒子，防止横向溢出滚动条的 */
.jbbg_wrap {
    width: 100%;
	padding-top: 40px;
    overflow: hidden;
    position: relative;
}

/* 渐变背景盒子 */
.jbbg {
    height: 290rpx;
    /* 背景渐变色 */
    background-image: -webkit-linear-gradient(90deg, #6df8ea, #0ac4c2 50%);
    background-image: -moz-linear-gradient(90deg, #6df8ea, #0ac4c2 50%);
    background-image: -ms-linear-gradient(90deg, #6df8ea, #0ac4c2 50%);
    background-image: -o-linear-gradient(90deg, #6df8ea, #0ac4c2 50%);
    background-image: linear-gradient(0deg, #6df8ea, #0ac4c2 50%);
    /* 圆弧 */
    border-radius: 0 0 50% 50%;
    /* 为了让圆弧好看，这里用了奇淫巧技。让盒子的宽度设置为屏幕宽度的150%。 */
    width: 150%;
    position: absolute;
    top: 0;
    /* 往左边拉-25% */
    left: -25%;
    /* z-index设置为-1表示它在后面，别的元素能踩住它 */
    z-index: -1;
}

/* 顶部条 */
header {
    /* 高度是不根据浏览器尺寸变化而变化的。为啥？设计师说的。工作的时候，设计师在开需求会的时候，会跟大家说的。 */
    height: 30px;
    padding: 8px 0;
    display: flex;
}

header .btn1 {
    width: 46px;
    height: 30px;
    position: relative;
    /* 让内部元素垂直水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

header .soso {
    flex: 1;
    height: 30px;
}

header .btn2 {
    width: 46px;
    height: 30px;
}

/* 分类按钮，它是垂直、水平都居中的，是因为父盒子设置了justify-content和align-items */
header .btn1 .flbtn {
    width: 20px;
    height: 20px;
    background-image: url(/static/fenlei.png);
    /* 背景尺寸。cover表示覆盖，让背景图覆盖盒子。 */
    background-size: cover;
}

header .btn2 {
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    color: white;
}

header .soso .soso_inner {
    height: 30px;
    background-color: white;
    border-radius: 15px;
    position: relative;
    padding-left: 40px;
    line-height: 30px;
    font-size: 14px;
    color: #848484;
}

header .soso .soso_inner::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-image: url(/static/fdj.png);
    background-size: cover;
    left: 12px;
    top: 7px;
}

/* 轮播图 */
.carousel {
    width: 710rpx;
    height: 284rpx;
    margin: 0 auto;
    margin-bottom: 8px;
    border-radius: 10px;
    overflow: hidden;
}
/* 轮播图 */
.carousel .myswiper{
    width: 710rpx;
    height: 284rpx;
	 
}
.carousel .myswiper image {
	width: 710rpx;
	height: 284rpx;
}

/* 图标导航 */
.icon-nav {
    width: 710rpx;
    height: 140rpx;
    background-color: white;
    margin: 0 auto;
    border-radius: 6px;
}

.icon-nav ul {
    list-style: none;
    display: flex;
    /* 遇见这样的小图标导航，千万不要想着“尊重设计师”直接space-around完事。 */
    justify-content: space-around;
    padding-top: 14rpx;
}

.icon-nav ul li {
    width: 100rpx;
    height: 120rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-nav ul li image {
    width: 100rpx;
    height: 80;
    /* 设计图上的任何尺寸，包裹margin、padding、字号。只要有必要，根据视口宽度不同，而等比例变化，那么就把设计图上的px单位的尺寸，乘0.04变为rem即可。 */
    margin-bottom: 6rpx;
}

.icon-nav ul li p {
    color: #666666;
    font-size: 0.48rem;
}

/* 旅行主题 */
.lxzt {
    width: 710rpx;
    margin: 8px auto;
}

.lxzt .hd {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.lxzt .hd h3 {
    font-size: 20px;
}

.lxzt .hd p {
    font-size: 14px;
    margin-left: auto;
}

.lxzt .bd .row1 {
    display: flex;
}

.lxzt .bd .row1 .grid1 {
    width: 468rpx;
    height: 308rpx;
    background-color: rgb(246, 232, 36);
    border-radius: 6px;
}

.lxzt .bd .row1 .grid2 {
    width: 226rpx;
    height: 308rpx;
    background-color: rgb(235, 201, 9);
    margin-left: auto;
    border-radius: 6px;
}

.lxzt .bd .row2 {
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
}

.lxzt .bd .row2 .grid1 {
    width: 226rpx;
    height: 308rpx;
    background-color: rgb(23, 143, 199);
    border-radius: 6px;
}

.lxzt .bd .row2 .grid2{
    width: 226rpx;
    height: 308rpx;
    background-color: rgb(23, 199, 61);
    border-radius: 6px;
}

.lxzt .bd .row2 .grid3 {
    width: 226rpx;
    height: 308rpx;
    background-color: rgb(199, 19, 160);
    border-radius: 6px;
}
</style>